<template>
  <div class="header-container">
    <div class="container">
      <el-row>
        <el-col :span="5">
          <div class="left">
            <img src="@/assets/icon/PYlogo.png">
            <div class="left-title">中福网校园二手交易平台</div>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="center">
            <el-menu
              :default-active="activeIndex2"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#3498db"
              text-color="#fff"
              active-text-color="#ecf0f1"
              router>
              <el-menu-item index="home">首页</el-menu-item>
              <el-menu-item index="release">发布</el-menu-item>
              <el-menu-item index="collect">收藏</el-menu-item>
              <el-menu-item index="mine">我的</el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="right">
            <div class="is-login" v-if="user.username">
              <el-dropdown>
                <h2>欢迎:{{user.username}}</h2>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item><button @click="logout">注销</button></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              
            </div>
            <div class="right-login" v-else>
              <router-link to="/login">登录</router-link> |
              <router-link to="/register">注册</router-link>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect() {
        // console.log(key, keyPath);
      },
      logout() {
      localStorage.clear()
      location.reload()
      // console.log(localStorage.getItem('user'))
      // console.log(this.$store.state);
    },
    },
    computed: {
      user() {
        return this.$store.state.user
      }
    },
    created() {
      // console.log(JSON.parse(localStorage.getItem('user')) )
      // console.log(this.$store.state)
      // console.log(this.$store.state.user)
    }
  }
</script>

<style scoped>
.header-container {
  background-color: #3498db;
}
.container {
  width: 1200px;
  margin: auto;
}
.left {
  display: flex;
  line-height: 50px;
}
.left img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.left-title {
  font-size: 15px;
  font-weight: 1000;
}
.el-menu-item {
  width: 150px;
  text-align: center;
  font-size: 20px;
}
.right-login {
  height: 50px;
  line-height: 60px;
  font-size: 20px;
  color: aliceblue;
}
.right-login a {
  text-decoration: none;
  color: aliceblue;
}
</style>